<template>
  <div class="goodsDetail">
    <div class="flex_align">
      <!-- <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('品类编码') }}：</span>
        <el-input v-model="formInfo.CategoryCode" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('品类名称') }}：</span>
        <el-input v-model="formInfo.CategoryName" class="w164" />
      </div> -->
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('2.0品名') }}：</span>
        <el-input v-model="formInfo.SysItemName20" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('2.0物料描述') }}：</span>
        <el-input v-model="formInfo.SysItemRemark" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('2.0物料码') }}：</span>
        <el-input v-model="formInfo.SysItemCode20" class="w164" />
      </div>
    </div>
    <div class="flex_align mt20">
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('3.0物料描述') }}：</span>
        <el-input v-model="formInfo.SysItemRemark30" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('3.0物料码') }}：</span>
        <el-input v-model="formInfo.SysItemCode30" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('备注') }}：</span>
        <el-input v-model="formInfo.Remark" class="w164" />
      </div>
    </div>
    <div class="tableDetail">
      <div class="button-add">
        <el-button size="small" type="primary" @click="addFn()">
          {{ translate('添加行') }}
        </el-button>
        <el-button size="small" type="danger" @click="deletedchild()">
          {{ translate('删除行') }}
        </el-button>
      </div>
      <el-scrollbar
        wrap-class="scrollbar-wrapper"
        wrap-style="overflow-x: auto;"
      >
        <el-table
          ref="multipleTable"
          border
          :data="tableData"
          height="300"
          :row-class-name="tableRowClassName"
          :row-key="getRowKey"
          style="width: 1270px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="value" type="selection" width="55" />
          <el-table-column label="序号" type="index" width="55" />
          <!-- <el-table-column
            :label="translate('大类')"
            prop="LCategory"
          /> -->
          <el-table-column
            :label="translate('大类名称')"
            prop="LCategoryName"
            width="60"
          />
          <!-- <el-table-column
            :label="translate('中类')"
            prop="MCategory"
          /> -->
          <el-table-column
            :label="translate('中类名称')"
            prop="MCategoryName"
          />
          <!-- <el-table-column :label="translate('小类')" prop="SCategory" /> -->
          <el-table-column :label="translate('小类名称')" prop="SCategoryName" />
          <el-table-column
            :label="translate('品类编码')"
            prop="CategoryCode"
          />
          <el-table-column
            :label="translate('品类名称')"
            prop="CategoryName"
          />
          <!-- <el-table-column
            :label="translate('计量单位')"
            prop="BaseUnitCode"
            width="60"
          /> -->
          <el-table-column
            :label="translate('计量单位描述')"
            prop="BaseUnitRemark"
          />
          <el-table-column
            :label="translate('拼接规则')"
            prop="ItemRule"
          />
          <el-table-column
            :label="translate('特性1编码')"
            prop="AttributeCode1"
          />
          <el-table-column
            :label="translate('特性1名称')"
            prop="AttributeName1"
          />
          <el-table-column :label="translate('特性-值1')" width="120">
            <template #default="{ row }">
              <el-input v-model="row.AttributeValue1" type="text"/>
            </template>
          </el-table-column>
          <el-table-column
            :label="translate('特性2编码')"
            prop="AttributeCode2"
          />
          <el-table-column
            :label="translate('特性2名称')"
            prop="AttributeName2"
          />
          <el-table-column :label="translate('特性-值2')" width="120">
            <template #default="{ row }">
              <el-input v-model="row.AttributeValue2" type="text"/>
            </template>
          </el-table-column>
          <el-table-column
            :label="translate('特性3编码')"
            prop="AttributeCode3"
          />
          <el-table-column
            :label="translate('特性3名称')"
            prop="AttributeName3"
          />
          <el-table-column :label="translate('特性-值3')" width="120">
            <template #default="{ row }">
              <el-input v-model="row.AttributeValue3" type="text"/>
            </template>
          </el-table-column>
          <el-table-column
            :label="translate('特性4编码')"
            prop="AttributeCode4"
          />
          <el-table-column
            :label="translate('特性4名称')"
            prop="AttributeName4"
          />
          <el-table-column :label="translate('特性-值4')" width="120">
            <template #default="{ row }">
              <el-input v-model="row.AttributeValue4" type="text"/>
            </template>
          </el-table-column>
          <el-table-column
            :label="translate('特性5编码')"
            prop="AttributeCode5"
          />
          <el-table-column
            :label="translate('特性5名称')"
            prop="AttributeName5"
          />
          <el-table-column :label="translate('特性-值5')" width="120">
            <template #default="{ row }">
              <el-input v-model="row.AttributeValue5" type="text"/>
            </template>
          </el-table-column>
          <el-table-column
            :label="translate('特性6编码')"
            prop="AttributeCode6"
          />
          <el-table-column
            :label="translate('特性6名称')"
            prop="AttributeName6"
          />
          <el-table-column :label="translate('特性-值6')" width="120">
            <template #default="{ row }">
              <el-input v-model="row.AttributeValue6" type="text"/>
            </template>
          </el-table-column>
          <el-table-column
            :label="translate('特性7编码')"
            prop="AttributeCode7"
          />
          <el-table-column
            :label="translate('特性7名称')"
            prop="AttributeName7"
          />
          <el-table-column :label="translate('特性-值7')" width="120">
            <template #default="{ row }">
              <el-input v-model="row.AttributeValue7" type="text"/>
            </template>
          </el-table-column>
          <el-table-column
            :label="translate('特性8编码')"
            prop="AttributeCode8"
          />
          <el-table-column
            :label="translate('特性8名称')"
            prop="AttributeName8"
          />
          <el-table-column :label="translate('特性-值8')" width="120">
            <template #default="{ row }">
              <el-input v-model="row.AttributeValue8" type="text"/>
            </template>
          </el-table-column>
          <el-table-column
            :label="translate('特性9编码')"
            prop="AttributeCode9"
          />
          <el-table-column
            :label="translate('特性9名称')"
            prop="AttributeName9"
          />
          <el-table-column :label="translate('特性-值9')" width="120">
            <template #default="{ row }">
              <el-input v-model="row.AttributeValue9" type="text"/>
            </template>
          </el-table-column>
          <el-table-column
            :label="translate('特性10编码')"
            prop="AttributeCode10"
          />
          <el-table-column
            :label="translate('特性10名称')"
            prop="AttributeName10"
          />
          <el-table-column :label="translate('特性-值10')" width="120">
            <template #default="{ row }">
              <el-input v-model="row.AttributeValue10" type="text"/>
            </template>
          </el-table-column>
          <el-table-column
            :label="translate('特性11编码')"
            prop="AttributeCode11"
          />
          <el-table-column
            :label="translate('特性11名称')"
            prop="AttributeName11"
          />
          <el-table-column :label="translate('特性-值11')" width="120">
            <template #default="{ row }">
              <el-input v-model="row.AttributeValue11" type="text"/>
            </template>
          </el-table-column>
          <el-table-column
            :label="translate('特性12编码')"
            prop="AttributeCode12"
          />
          <el-table-column
            :label="translate('特性12名称')"
            prop="AttributeName12"
          />
          <el-table-column :label="translate('特性-值12')" width="120">
            <template #default="{ row }">
              <el-input v-model="row.AttributeValue12" type="text"/>
            </template>
          </el-table-column>
          <el-table-column
            :label="translate('特性13编码')"
            prop="AttributeCode13"
          />
          <el-table-column
            :label="translate('特性13名称')"
            prop="AttributeName13"
          />
          <el-table-column :label="translate('特性-值13')" width="120">
            <template #default="{ row }">
              <el-input v-model="row.AttributeValue13" type="text"/>
            </template>
          </el-table-column>
          <el-table-column
            :label="translate('特性14编码')"
            prop="AttributeCode14"
          />
          <el-table-column
            :label="translate('特性14名称')"
            prop="AttributeName14"
          />
          <el-table-column :label="translate('特性-值14')" width="120">
            <template #default="{ row }">
              <el-input v-model="row.AttributeValue14" type="text"/>
            </template>
          </el-table-column>
          <el-table-column
            :label="translate('特性15编码')"
            prop="AttributeCode15"
          />
          <el-table-column
            :label="translate('特性15名称')"
            prop="AttributeName15"
          />
          <el-table-column :label="translate('特性-值15')" width="120">
            <template #default="{ row }">
              <el-input v-model="row.AttributeValue15" type="text"/>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
    <el-dialog
      v-model="dialogChiled"
      :title="translate('选择物料')"
      width="800px"
    >
      <div style="padding-bottom: 20px">
        <span class="color_494949 ft12 pr5">{{ translate('品类编码') }}：</span>
        <el-input
          v-model="searchChild"
          class="w164 mr10"
          :placeholder="translate('请输入关键字')"
        />
        <el-button
            class="settingBtn mr10"
            type="primary"
            @click="WmsItemCodeData('seach')"
          >
            {{ translate('查询') }}
        </el-button>
      </div>
      <div>
        <el-table
          ref="table"
          border
          :data="WmsData"
          height="400"
          style="width: 800px"
          @select="handleSelectionChangechiled"
        >
          <el-table-column prop="value" type="selection" width="55" />
          <el-table-column :label="translate('大类')" prop="LCategory" />
          <el-table-column :label="translate('大类名称')" prop="LCategoryName" />
          <el-table-column :label="translate('中类')" prop="MCategory" />
          <el-table-column :label="translate('中类名称')" prop="MCategoryName" />
          <el-table-column :label="translate('小类')" prop="SCategory" />
          <el-table-column :label="translate('小类名称')" prop="SCategoryName" />
          <el-table-column :label="translate('品类编码')" prop="CategoryCode" />
          <el-table-column :label="translate('品类名称')" prop="CategoryName" />
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            :current-page="pageNo"
            :layout="layout"
            :page-size="pageSize"
            :total="total"
            @current-change="handleCurrentchiled"
            @size-change="handleSizechiled"
          />
        </div>
      </div>
      <template #footer>
        <el-button @click="dialogChiled = false">
          {{ translate('取消') }}
        </el-button>
        <el-button type="primary" @click="submitChiled()">
          {{ translate('确定') }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import { WmsItemCodeData, searchArrivalNoticeDetail } from '@/api/form'
  import { translate } from '@/i18n'
  export default {
    name: 'Detail',
    components: {},
    props: {
      form: {
        type: Object,
        default: () => {
          return {}
        },
      },
      fromtype: {
        type: String,
        default: '',
      },
      chileddetail: {
        type: Array,
        default: () => {
          return []
        },
      },
      extralist: {
        type: Array,
        default: () => {
          return []
        },
      },
      supplierdata: {
        type: Array,
        default: () => {
          return []
        },
      },
      agreementlist: {
        type: Array,
        default: () => {
          return []
        },
      },
      purchaselist: {
        type: Array,
        default: () => {
          return []
        },
      },
      whdata: {
        type: Array,
        default: () => {
          return []
        },
      },
    },
    emits: ['deletedchild', 'changelist', 'changeextralist'],
    data() {
      return {
        ItemList: [],
        itemChiledList: [],
        WmsData: [], // 选择物资数据
        formInfo: this.form,
        dialogChiled: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        pageNo: 1,
        pageSize: 10,
        radio: '',
        state1: '',
        tableDatachi: [],
        selectRow: {},
        detailArr: this.extralist || [],
        Purchasearr: [
          {
            FullName: '青海油田采油一厂-采购组',
          },
        ],
        FactoryArr: [
          {
            FullName: '青海油田采油一厂',
          },
        ],
        PlanTypearr: [
          {
            value: '零星计划',
          },
          {
            value: '年度计划',
          },
          {
            value: '季度计划',
          },
        ],
        Wmsqualityarr: [
          {
            value: '生产物资',
          },
          {
            value: '工程物资',
          },
        ],
        optionsIBType: [
          {
            label: '委托仓储入库',
            value: '1',
          },
          {
            label: '正常入库',
            value: '2',
          },
        ],
        deleArr: [],
        tableData: this.chileddetail,
        agreementData: this.agreementlist,
        purchaseList: this.purchaselist,
        searchChild: '',
      }
    },
    watch: {
      chileddetail(val) {
        this.tableData = val
      },
      extralist(val) {
        console.log(val)
        this.detailArr = val
      },
      form(val) {
        this.formInfo = val
      },
      dialogChiled(val) {
        if(!val) {
          this.searchChild = ''
        }
      },
    },
    methods: {
      // clickrow(row) {
      //   console.log(row)
      //   const selected = this.itemChiledList.some(
      //     (item) => item.ICAID === row.ICAID
      //   )
      //   if (!selected) {
      //     this.itemChiledList.push(row)
      //     this.$refs.multipleTable.toggleRowSelection(row, true)
      //   } else {
      //     const finaArr = this.itemChiledList.filter(
      //       (item) => item.ICAID !== row.ICAID
      //     )
      //     this.itemChiledList = finaArr
      //     this.$refs.multipleTable.toggleRowSelection(row, false)
      //   }
      // },
      deleFnchild(row) {
        this.$nextTick(() => {
          this.tableDatachi.map((item,index) =>{
            if(row.WellNumber === item.WellNumber){
              this.tableDatachi.splice(index,1)
            }
          })

        })
      },
      handleSelect(item) {
        console.log(item)
      },
      querySearch(queryString, cb) {
        const restaurants = this.whdata
        const results =
          queryString && queryString != 'null'
            ? restaurants.filter(this.createFilter(queryString))
            : restaurants
        console.log(results)
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter(queryString) {
        return (restaurant) => {
          console.log(restaurant)
          return (
            restaurant.value
              .toLowerCase()
              .indexOf(queryString.toLowerCase()) === 0
          )
        }
      },
      translate(row) {
        return translate(row)
      },
      changeNo(item) {
        this.formInfo.CCode = item.CNo
      },
      //分页条数切换
      handleSizechiled(val) {
        this.pageSize = val
        this.WmsItemCodeData()
      },
      //分页切换
      handleCurrentchiled(val) {
        this.pageNo = val
        this.WmsItemCodeData()
      },
      tableRowClassName({ row, rowIndex }) {
        row.row_index = rowIndex
      },
      handleSelectionChange(e) {
        this.ItemList = e
      },
      handleSelectionChangechiled(selection, row) {
        if (this.itemChiledList) {
          if(selection.length>0){
           this.$refs.table.toggleRowSelection(this.itemChiledList, false); // 取消之前的选择
          }else {
            this.$refs.table.toggleRowSelection(this.itemChiledList, true); // 取消之前的选择
          }
      }
        this.itemChiledList = row

      },
      changePono(val) {
        console.log(val)
        if (this.fromtype === 'goodslist') {
          this.searchArrivalNoticeDetail(val)
        }
      },
      async searchArrivalNoticeDetail(val) {
        const params = {
          pono: val,
        }
        const data = await searchArrivalNoticeDetail(params)
        if (data.Result.Code == '200') {
          this.tableData = data.Result.Data.data?.PurchaseOrderDetail
          this.formInfo = data.Result.Data.data
          this.formInfo.PurchaseNo = this.formInfo.PONo
          this.formInfo.CCode = this.formInfo.CNo
          this.$emit('changelist', data.Result.Data.data)
          console.log(this.formInfo)
          console.log(this.chileddetail)
        } else {
          this.tableData = []
        }
      },
      submitChiled() {
        console.log(this.itemChiledList)
        let arrData = [this.itemChiledList]
        if (arrData.length <= 0) {
          this.$message({
            message: '请选择物料',
            type: 'warning',
          })
          return
        } else {
          const arrChiled = this.tableData
          arrData.map((item) => {
            let istrue = false
            if (arrChiled.length > 0) {
              arrChiled.map((item2) => {
                if (
                  item.ICAID === item2.ICAID
                ) {
                  istrue = true
                }
              })
            }
            if (!istrue) {
              arrChiled.length = []
              arrChiled.push(item)
            }
          })
          this.$nextTick(() => {
            this.tableData = arrChiled
          })
          this.dialogChiled = false
        }
      },
      getRowKey(row) {
        return row.ISID
      },
      addFn() {
        this.itemChiledList = []
        this.$nextTick(() => {
          this.WmsItemCodeData()
        })
        console.log(this.chileddetail)
      },
      addFnchi() {
        this.$nextTick(() => {
          this.tableDatachi.push({
            WellNumber: '',
            Qty: '',
            Remark: '',
            ItemCode: this.selectRow.ItemCode,
            WSCode: this.selectRow.WSCode,
            WHUnit: this.selectRow.WHUnit,

          })
        })
      },
      async WmsItemCodeData(val) {
        if (val === 'seach') {
          this.pageNo = 1
        }
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          tableName: '',
          sort: '',
          order: '',
          wheres: JSON.stringify([
            {
              name: 'CategoryCode',
              value: this.searchChild,
              displayType: 'like',
            },
          ]),
          export: false,
          value: '',
        }
        const data = await WmsItemCodeData(params)
        if (data.code == '200') {
          this.dialogChiled = true
          this.WmsData = data.data.rows
          this.total = data.data.total
        }
      },
      deletedchild() {
        if (this.ItemList.length <= 0) {
          this.$message({
            message: '请选择要删除的物料',
            type: 'warning',
          })
          return
        }
        this.$nextTick(() => {
          const arr = this.tableData
          for (let i = 0; i < this.ItemList.length; i++) {
            for (let j = 0; j < arr.length; j++) {
              if (!this.ItemList[i].ICADId) {
                if (this.ItemList[i].row_index === arr[j].row_index) {
                  arr.splice(j, 1)
                }
              } else if (this.ItemList[i].ICADId === arr[j].ICADId) {
                this.deleArr.push(arr[j].ICADId)
                arr.splice(j, 1)
              }
            }
          }
          this.ItemList = []
          this.tableData = arr
          this.$emit('deletedchild', this.deleArr)
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .goodsDetail {
    height: 600px;
  }
  .flex_align {
    display: flex;
    align-items: center;
  }
  .tableDetail {
    padding: 10px;
    .button-add {
      text-align: end;
      padding: 10px;
    }
  }
  .mr20 {
    margin-right: 20px;
  }

  .w164 {
    width: 164px !important;
  }
  .inline-block {
    display: inline-block;

  }
  .mt20 {
    margin-top: 20px;
  }
  .mr10 {
    margin-right: 10px;
  }
  .mt10 {
    margin-top: 10px;
  }
  .w320 {
    width: 433px;
  }
  .color_494949 {
    width: 95px;
    display: inline-block;
    text-align: right;
  }
  .goodsDetail2 {
    min-height: 300px;
  }
  .flex_align {
    display: flex;
    align-items: center;
  }
  .tableDetail2 {
    padding: 10px;
    .button-add {
      text-align: end;
      padding: 10px;
    }
  }
  .main_active {
    display: inline-block;
    width: 120px;
    text-align: right;
  }
  .mr20 {
    margin-right: 20px;
  }

  .w400 {
    width: 400px !important;
  }
  .mt20 {
    margin-top: 10px;
  }
  .mr10 {
    margin-right: 10px;
  }
  ::v-deep input[type='number']::-webkit-inner-spin-button,
  ::v-deep input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }
  ::v-deep .el-scrollbar__wrap {
    overflow-x: auto;
    height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
  }
  ::v-deep .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
    white-space: nowrap;
    display: inline-block;
  }
  ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
</style>
